<template>
	<!-- 不动产  出售 头部 -->
	<view>
		<view class="head">
			<view class="list " :class="index==ind?'show':''" @click="childMethod(ind)" v-for="(item,ind) in 4" :key='ind'>
				{{ind+1}}
			</view>
			<view class="line">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sellHead",
		props:{
			type:''
		},
		data() {
			return {
				index: '0'
			};
		},
		mounted() {
			this.index=this.type
		},
		methods: {
			childMethod(type) {
				this.index = type
				this.$emit('fatherMethod',type)

			}
		}
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		justify-content: space-around;
		position: relative;
	}

	.list {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 58rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #000;
		border: 1rpx solid #e3e3e3;
	}

	.show {
		background-color: #3B74FF;
		color: #fff;
	}

	.line {
		width: 80%;
		height: 10rpx;
		background-color: #B7B7B7;
		position: absolute;
		top: 40%;
		z-index: -1;
	}
</style>
